'use client';

import React, { useState } from 'react';
import { ImageData } from '@/types/image';
export interface ViewportState {
    zoom: number;
    pan: { x: number; y: number };
    rotation: number;
    brightness: number;
    contrast: number;
    windowLevel: number;
    windowWidth: number;
}

interface ImageMetadataProps {
    image: ImageData;
    viewport: ViewportState;
    className?: string;
}

export const ImageMetadata: React.FC<ImageMetadataProps> = ({
    image,
    viewport,
    className = '',
}) => {
    const [isCollapsed, setIsCollapsed] = useState(false);

    const formatFileSize = (bytes: number): string => {
        const units = ['B', 'KB', 'MB', 'GB'];
        let size = bytes;
        let unitIndex = 0;

        while (size >= 1024 && unitIndex < units.length - 1) {
            size /= 1024;
            unitIndex++;
        }

        return `${size.toFixed(1)} ${units[unitIndex]}`;
    };

    const formatDate = (dateString: string): string => {
        return new Date(dateString).toLocaleString();
    };

    return (
        <div className={`bg-white/90 backdrop-blur-sm rounded-lg shadow-lg ${className}`}>
            {/* Header */}
            <div className="flex items-center justify-between p-3 border-b">
                <h3 className="text-sm font-medium text-gray-900">Image Information</h3>
                <button
                    onClick={() => setIsCollapsed(!isCollapsed)}
                    className="p-1 hover:bg-gray-100 rounded"
                >
                    <svg
                        className={`w-4 h-4 transition-transform ${isCollapsed ? 'rotate-180' : ''}`}
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
            </div>

            {/* Content */}
            {!isCollapsed && (
                <div className="p-3 space-y-4">
                    {/* Basic Information */}
                    <div>
                        <h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">
                            Basic Information
                        </h4>
                        <div className="space-y-2 text-sm">
                            <div className="flex justify-between">
                                <span className="text-gray-600">Name:</span>
                                <span className="font-medium text-right">{image.id}</span>
                            </div>
                            <div className="flex justify-between">
                                <span className="text-gray-600">Format:</span>
                                <span className="font-medium">{image.format}</span>
                            </div>
                            <div className="flex justify-between">
                                <span className="text-gray-600">Type:</span>
                                <span className="font-medium">{image.type}</span>
                            </div>
                            {image.createdAt && (
                                <div className="flex justify-between">
                                    <span className="text-gray-600">Created:</span>
                                    <span className="font-medium text-right">{formatDate(image.createdAt.toString())}</span>
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Image Properties */}
                    <div>
                        <h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">
                            Image Properties
                        </h4>
                        <div className="space-y-2 text-sm">
                            <div className="flex justify-between">
                                <span className="text-gray-600">Dimensions:</span>
                                <span className="font-medium">{image.dimensions.width} × {image.dimensions.height}</span>
                            </div>
                            {image.dimensions.depth && (
                                <div className="flex justify-between">
                                    <span className="text-gray-600">Depth:</span>
                                    <span className="font-medium">{image.dimensions.depth}</span>
                                </div>
                            )}
                            <div className="flex justify-between">
                                <span className="text-gray-600">Window Center:</span>
                                <span className="font-medium">{image.windowCenter}</span>
                            </div>
                            <div className="flex justify-between">
                                <span className="text-gray-600">Window Width:</span>
                                <span className="font-medium">{image.windowWidth}</span>
                            </div>
                            {image.pixelSpacing && (
                                <div className="flex justify-between">
                                    <span className="text-gray-600">Pixel Spacing:</span>
                                    <span className="font-medium">
                                        {image.pixelSpacing[0].toFixed(3)} × {image.pixelSpacing[1].toFixed(3)} mm
                                    </span>
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Current Viewport */}
                    <div>
                        <h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">
                            Current View
                        </h4>
                        <div className="space-y-2 text-sm">
                            <div className="flex justify-between">
                                <span className="text-gray-600">Zoom:</span>
                                <span className="font-medium">{Math.round(viewport.zoom * 100)}%</span>
                            </div>
                            <div className="flex justify-between">
                                <span className="text-gray-600">Rotation:</span>
                                <span className="font-medium">{viewport.rotation}°</span>
                            </div>
                            <div className="flex justify-between">
                                <span className="text-gray-600">Pan:</span>
                                <span className="font-medium">
                                    {Math.round(viewport.pan.x)}, {Math.round(viewport.pan.y)}
                                </span>
                            </div>
                            <div className="flex justify-between">
                                <span className="text-gray-600">Window L/W:</span>
                                <span className="font-medium">
                                    {viewport.windowLevel} / {viewport.windowWidth}
                                </span>
                            </div>
                        </div>
                    </div>

                    {/* DICOM Metadata (if available) */}
                    {image.metadata && (
                        <div>
                            <h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">
                                DICOM Information
                            </h4>
                            <div className="space-y-2 text-sm">
                                {image.metadata.patientName && (
                                    <div className="flex justify-between">
                                        <span className="text-gray-600">Patient:</span>
                                        <span className="font-medium text-right">{image.metadata.patientName}</span>
                                    </div>
                                )}
                                {image.metadata.studyDate && (
                                    <div className="flex justify-between">
                                        <span className="text-gray-600">Study Date:</span>
                                        <span className="font-medium">{image.metadata.studyDate}</span>
                                    </div>
                                )}
                                {image.metadata.modality && (
                                    <div className="flex justify-between">
                                        <span className="text-gray-600">Modality:</span>
                                        <span className="font-medium">{image.metadata.modality}</span>
                                    </div>
                                )}
                                {image.metadata.bodyPart && (
                                    <div className="flex justify-between">
                                        <span className="text-gray-600">Body Part:</span>
                                        <span className="font-medium">{image.metadata.bodyPart}</span>
                                    </div>
                                )}
                                {image.metadata.sliceThickness && (
                                    <div className="flex justify-between">
                                        <span className="text-gray-600">Slice Thickness:</span>
                                        <span className="font-medium">{image.metadata.sliceThickness} mm</span>
                                    </div>
                                )}
                                {image.metadata.repetitionTime && (
                                    <div className="flex justify-between">
                                        <span className="text-gray-600">Repetition Time:</span>
                                        <span className="font-medium">{image.metadata.repetitionTime} ms</span>
                                    </div>
                                )}
                                {image.metadata.echoTime && (
                                    <div className="flex justify-between">
                                        <span className="text-gray-600">Echo Time:</span>
                                        <span className="font-medium">{image.metadata.echoTime} ms</span>
                                    </div>
                                )}
                            </div>
                        </div>
                    )}


                </div>
            )}
        </div>
    );
};

export default ImageMetadata;